<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <view class="result-icon">
        <uni-icons v-if="accuracy >= 80" color="#ffffff" size="80" type="checkmarkempty"></uni-icons>
        <uni-icons v-else color="#ffffff" size="80" type="closeempty"></uni-icons>
      </view>
      <view class="result-text">{{ accuracy >= 80 ? '太棒了！' : '继续加油！' }}</view>
      <view class="result-score">得分：{{ score }}</view>
    </view>

    <!-- Statistics -->
    <view class="stats-container">
      <view class="stat-card">
        <view class="stat-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
          <uni-icons color="#ffffff" size="32" type="star"></uni-icons>
        </view>
        <view class="stat-info">
          <view class="stat-value">{{ correctCount }} / {{ totalCount }}</view>
          <view class="stat-label">正确题数</view>
        </view>
      </view>

      <view class="stat-card">
        <view class="stat-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
          <uni-icons color="#ffffff" size="32" type="flag"></uni-icons>
        </view>
        <view class="stat-info">
          <view class="stat-value">{{ accuracy }}%</view>
          <view class="stat-label">正确率</view>
        </view>
      </view>

      <view class="stat-card">
        <view class="stat-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
          <uni-icons color="#ffffff" size="32" type="circle"></uni-icons>
        </view>
        <view class="stat-info">
          <view class="stat-value">{{ formatTime(totalTime) }}</view>
          <view class="stat-label">总用时</view>
        </view>
      </view>

      <view class="stat-card">
        <view class="stat-icon" style="background: linear-gradient(135deg, #fa709a, #fee140);">
          <uni-icons color="#ffffff" size="32" type="minus"></uni-icons>
        </view>
        <view class="stat-info">
          <view class="stat-value">{{ formatTime(averageTime) }}</view>
          <view class="stat-label">平均用时</view>
        </view>
      </view>
    </view>

    <!-- Question Details -->
    <view class="details-container">
      <view class="details-title">答题详情</view>
      <view
          v-for="(question, index) in questions"
          :key="index"
          class="detail-item"
      >
        <view class="detail-header">
          <view class="detail-number">第 {{ index + 1 }} 题</view>
          <view :class="question.isCorrect ? 'correct' : 'wrong'" class="detail-status">
            {{ question.isCorrect ? '✓ 正确' : '✗ 错误' }}
          </view>
        </view>
        <view class="detail-question">{{ question.question }} = ?</view>
        <view class="detail-answer">
          <text class="label">正确答案：</text>
          <text class="value correct">{{ formatAnswer(question.options[question.correctIndex]) }}</text>
        </view>
        <view v-if="!question.isCorrect" class="detail-answer">
          <text class="label">你的答案：</text>
          <text class="value wrong">{{ formatAnswer(question.options[question.userAnswer]) }}</text>
        </view>
        <view class="detail-time">用时：{{ formatTime(question.timeUsed) }}</view>
      </view>
    </view>

    <!-- Action Buttons -->
    <view class="actions">
      <button class="action-btn retry-btn" @tap="retry">
        <uni-icons color="#007AFF" size="20" type="refresh"></uni-icons>
        <text>再练一次</text>
      </button>
      <button class="action-btn home-btn" @tap="goHome">
        <uni-icons color="#28a745" size="20" type="home"></uni-icons>
        <text>返回首页</text>
      </button>
    </view>
  </view>
</template>

<script>
import Storage from '@/utils/storage.js';
import ScoreCalculator from '@/utils/score-calculator.js';
import CommonUtils from '@/utils/common.js';

export default {
  data() {
    return {
      questions: [],
      totalTime: 0,
      score: 0,
      correctCount: 0,
      totalCount: 0,
      accuracy: 0,
      averageTime: 0
    }
  },
  onLoad() {
    this.loadResult();
    this.calculateStats();
    this.saveRecord();
  },
  methods: {
    // 加载答题结果
    loadResult() {
      const result = getApp().globalData.speedCalcChoiceResult;
      if (result) {
        this.questions = result.questions;
        this.totalTime = (result.endTime - result.startTime) / 1000;
      }
    },

    // 计算统计数据
    calculateStats() {
      // 使用专门的速算选择题分数计算函数
      const scoreResult = ScoreCalculator.calculateSpeedCalcChoiceScore(this.questions, this.totalTime);
      
      this.totalCount = scoreResult.totalQuestions;
      this.correctCount = scoreResult.correctCount;
      this.accuracy = scoreResult.accuracy;
      this.averageTime = scoreResult.averageTime;
      this.score = scoreResult.score;
    },

    // 保存记录
    saveRecord() {
      const record = {
        id: Date.now().toString(),
        type: 'speed-calc-choice',
        score: this.score,
        correctCount: this.correctCount,
        totalCount: this.totalCount,
        accuracy: this.accuracy,
        totalTime: this.totalTime,
        averageTime: this.averageTime,
        timestamp: new Date().toISOString()
      };

      const records = Storage.get('speed_calc_choice_records', []);
      records.unshift(record);
      
      // 只保留最近50条记录
      if (records.length > 50) {
        records.splice(50);
      }
      
      Storage.set('speed_calc_choice_records', records);
    },

    // 格式化时间
    formatTime(seconds) {
      return CommonUtils.formatTime(seconds);
    },

    // 格式化答案显示
    formatAnswer(value) {
      if (typeof value === 'string') return value;
      return value.toString();
    },

    // 再练一次
    retry() {
      uni.navigateBack({
        delta: 2
      });
    },

    // 返回首页
    goHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.header {
  background: linear-gradient(135deg, #67e8f9, #38bdf8);
  padding: 60rpx 40rpx;
  text-align: center;
  color: white;

  .result-icon {
    margin-bottom: 20rpx;
  }

  .result-text {
    font-size: 40rpx;
    font-weight: bold;
    margin-bottom: 15rpx;
  }

  .result-score {
    font-size: 32rpx;
    opacity: 0.9;
  }
}

.stats-container {
  padding: 40rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.stat-card {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.08);

  .stat-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
  }

  .stat-info {
    flex: 1;

    .stat-value {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 5rpx;
    }

    .stat-label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.details-container {
  margin: 0 40rpx 40rpx;
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.08);

  .details-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    text-align: center;
  }
}

.detail-item {
  padding: 25rpx;
  margin-bottom: 20rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
  border-left: 4rpx solid #007AFF;

  &:last-child {
    margin-bottom: 0;
  }

  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rpx;

    .detail-number {
      font-size: 26rpx;
      font-weight: bold;
      color: #333;
    }

    .detail-status {
      font-size: 24rpx;
      font-weight: bold;
      padding: 5rpx 15rpx;
      border-radius: 20rpx;

      &.correct {
        color: #28a745;
        background: #d4edda;
      }

      &.wrong {
        color: #dc3545;
        background: #f8d7da;
      }
    }
  }

  .detail-question {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }

  .detail-answer {
    font-size: 26rpx;
    margin-bottom: 8rpx;

    .label {
      color: #666;
    }

    .value {
      font-weight: bold;
      margin-left: 10rpx;

      &.correct {
        color: #28a745;
      }

      &.wrong {
        color: #dc3545;
      }
    }
  }

  .detail-time {
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
  }
}

.actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx 40rpx;
  background: white;
  box-shadow: 0 -5rpx 15rpx rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;

  &.retry-btn {
    background: white;
    color: #007AFF;
    border: 2rpx solid #007AFF;
  }

  &.home-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
  }

  &:active {
    transform: scale(0.98);
  }
}
</style>

